<template>
    <Carousel></Carousel>
    <!--    box-rivet保护内容不会随着浏览器缩小而变化-->
    <div class="box-rivet">
        <div class="home-context base">
            <div class="home-context-left">
                <hot-recommended></hot-recommended>
                <personalized-recommendation v-show="store.state.user.isLogin"></personalized-recommendation>
                <new-disc-recommended></new-disc-recommended>
                <most-popular-recommended></most-popular-recommended>
            </div>
            <div class="home-context-right">
                <active-singer></active-singer>
                <popular-anchor></popular-anchor>
            </div>
        </div>
    </div>
</template>

<script>
import Carousel from "@/views/home/Carousel";
import HotRecommended from "@/views/recommend/HotRecommended";
import PersonalizedRecommendation from "@/views/recommend/PersonalizedRecommendation";
import NewDiscRecommended from "@/views/recommend/NewDiscRecommended";
import ActiveSinger from "@/views/home/active-singer/ActiveSinger";
import PopularAnchor from "@/views/home/popular-anchor/PopularAnchor";
import MostPopularRecommended from "@/views/recommend/most-popular-list/MostPopularRecommended";
import {useStore} from "vuex";

export default {
    name: "Home",
    components: {
        Carousel,
        HotRecommended,
        PersonalizedRecommendation,
        NewDiscRecommended,
        ActiveSinger,
        PopularAnchor,
        MostPopularRecommended
    },
    setup() {
        const store = useStore();
        return {
            store
        }
    }
}
</script>
<style scoped lang="scss">
@import '@/assets/css/base.scss';
.box-rivet {
    width: $client-width;
    background: #f4f4f4;
    
    .home-context {
        @apply flex bg-white;
        .home-context-left {
            @apply w-4/5 border;
        }
        
        .home-context-right {
            @apply w-1/5 border;
        }
    }
}
</style>
